<template>
    <div class="parameter">
        <div class="product-nav">
            <div class="nav-item" :class="[productIndex==i?'navActive':'']" v-for="(v,i) in $tm('parameterNav')" :key="i" @click="changeSection(i)">
                {{ v }}
            </div>
        </div>
        <div class="parameter-head">
            <div class="head-left">
                <img :src="productDetail.icon" alt="" />
            </div>
            <div class="head-right">
                <div class="name">
                    {{ $i18n.locale=='zh'?productDetail.name_zh:productDetail.name_en }}
                </div>
                <div class="introduce">
                    <h1>{{ productDetail.model }}</h1>
                </div>
                <!-- <div class="pics">
                    <div class="pics-item" v-for="(v,i) in 3" :key="i">
                        <img :src="require(`@/assets/img/partsBanner${i+1}.png`)" alt="" />
                    </div>
                </div> -->
            </div>
        </div>
        <div class="parameter-detail"  data-aos="fade-up"  data-aos-once='true'>
            <div class="detail-title">
                {{ $t('technicalFeatures') }}
            </div>
            <div class="detail-rule" v-show="!v.hidden" v-for="(v,i) in parameterList" :key="i">
                <div class="rule-title">
                    {{ $i18n.locale=='zh'? v.title:v.title_en}}
                </div>
                <div class="rule"  v-for="(c,n) in v.data" :key="n">
                    <div class="rule-item" v-if="c.text!=''">
                        <span>{{$i18n.locale=='zh'? c.lable:c.lable_en }}</span>
                        <p>{{$i18n.locale=='zh'?c.text:c.text_en }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="serve" data-aos="fade-up"  data-aos-once='true'>
            <div class="serve-bg">
                <img src="@/assets/img/serve-bg.png" alt="">
            </div>
            <div class="serve-content">
                <div class="serve-l">
                    <img src="@/assets/img/logo.png" alt="" />
                </div>
                <div class="serve-r">
                    <h1>{{ $t('indexServeTitle') }}</h1>
                    <p>ShenZhen YANGWANG Technology company</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import API from '@/utils/request.js';
import AOS from "aos";
export default {
    name:'parameter',
    data(){
      return{
        parameterList:[
            {
                title:'产品规格',
                title_en:'Specification',
                hidden:false,
                data:[
                    {
                        lable:'产品型号',
                        lable_en:'Model',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'产品分类',
                        lable_en:'Series',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'传感器尺寸',
                        lable_en:'Sensor size',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'有效像素',
                        lable_en:'Effective pixel',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'解析度',
                        lable_en:'Resolution',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'输出接口',
                        lable_en:'Output',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'像元尺寸',
                        lable_en:'Pixel size',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'产品尺寸',
                        lable_en:'Size',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'电源',
                        lable_en:'Power',
                        text_en:'',
                        text:'',
                    },
                ]
            },
            {
                title:'产品功能',
                title_en:'Function',
                hidden:false,
                data:[
                    {
                        lable:'基本功能',
                        tlable_en:'Basic',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'UI界面',
                        lable_en:'UI',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'画质调整',
                        text_en:'Image adjustment',
                        text:'',
                    },
                    {
                        lable:'存储功能',
                        lable_en:'Storage',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'长度测量',
                        lable_en:'Length measure',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'十字线',
                        lable_en:'Crosshair',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'标示功能',
                        lable_en:'Marking',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'两圆心距离',
                        lable_en:'Center distance',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'几何测量',
                        lable_en:'Geo measure',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'测量系统',
                        lable_en:'Sys measure',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'功能',
                        lable_en:'Func',
                        text_en:'',
                        text:'',
                    },
                ]
            },
            {
                title:'产品包装',
                title_en:'Package',
                hidden:false,
                data:[
                    {
                        lable:'外观尺寸',
                        lable_en:'Size',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'单机重量',
                        lable_en:'Weight',
                        text_en:'',
                        text:'',
                    },
                    {
                        lable:'标准配件',
                        lable_en:'Accessry',
                        text_en:'',
                        text:'',
                    },
                ]
            },
        ],
        productIndex:1,
        productDetail:{},
        navList:['产品介绍','技术参数'],
        id:1,
      }
    },
    mounted(){
        this.id = this.$route.query.id
        this.productDetail = JSON.parse(sessionStorage.getItem('productDetail'))
        this.getCamInfo();
        AOS.init({
            offset: 200,   
            duration: 600,   
            easing: 'ease-in-sine',   
            delay: 100
        })
    },
    methods:{
        changeSection(n){
            if(n==this.productIndex) return false;
            let path = '/product'
            switch(n){
                case 0:
                    path += '/pageDetail'
                    break;
                case 1:
                    path += '/parameter'
                    break;     
                default:
                    break;
            }
            this.productIndex = n
            this.$router.push({path:path,query:{id:this.id}})
        },
        // 产品参数
        getCamInfo(){
            let that = this;
            API.getCamInfo({cam_id:that.id}).then(res=>{
                if(res.code==200){
                    that.detailData = res.data;
                    let data1 = res.data.specific,data2 = res.data.func,data3 = res.data.pkg,n1=0,n2=0,n3=0;
                    let v1 = that.parameterList[0].data,v2 = that.parameterList[1].data,v3 = that.parameterList[2].data;
                    v1[0].text =data1.model;v1[0].text_en =data1.model;
                    v1[1].text =data1.type;v1[1].text_en =data1.type;
                    v1[2].text =data1.sensor;v1[2].text_en =data1.sensor;
                    v1[3].text =data1.effe_pixels;v1[3].text_en =data1.effe_pixels;
                    v1[4].text =data1.resolution;v1[4].text_en =data1.resolution;
                    v1[5].text =data1.output;v1[5].text_en =data1.output;
                    v1[6].text =data1.size;v1[6].text_en =data1.size;
                    v1[7].text =data1.pixel_size;v1[7].text_en =data1.pixel_size;
                    v2[0].text =data2.basic;v2[0].text_en =data2.basic_en;
                    v2[1].text =data2.ui;v2[1].text_en =data2.ui_en;
                    v2[2].text =data2.image_adjust;v2[2].text_en =data2.image_adjust_en;
                    v2[3].text =data2.image_adjust;v2[3].text_en =data2.image_adjust_en;
                    v2[4].text =data2.len_measure;v2[4].text_en =data2.len_measure;
                    v2[5].text =data2.crosshair;v2[5].text_en =data2.crosshair_en;
                    v2[6].text =data2.marking;v2[6].text_en =data2.marking_en;
                    v2[7].text =data2.center_distance;v2[7].text_en =data2.center_distance_en;
                    v2[8].text =data2.geo_measure;v2[8].text_en =data2.geo_measure_en;
                    v2[9].text =data2.sys_measure;v2[9].text_en =data2.sys_measure_en;
                    v2[10].text =data2.func;v2[10].text_en =data2.func_en;
                    v3[0].text =data3.size;v3[0].text_en =data3.size;
                    v3[1].text =data3.weight;v3[1].text_en =data3.weight;
                    v3[2].text =data3.accessory;v3[2].text_en =data3.accessory_en;
                    for(let i of v1){
                        if(i.text!=""||i.text_en!=""){
                            n1++;
                        }
                    }
                    for(let i of v2){
                        if(i.text!=""||i.text_en!=""){
                            n2++;
                        }
                    }
                    for(let i of v3){
                        if(i.text!=""||i.text_en!=""){
                            n3++;
                        }
                    }
                    that.$nextTick(()=>{
                        that.parameterList[0].data = v1;
                        n1<=0?that.parameterList[0].hidden=true:'';
                        that.parameterList[1].data = v2;
                        n2<=0?that.parameterList[1].hidden=true:'';
                        that.parameterList[2].data = v3;
                        n3<=0?that.parameterList[2].hidden=true:'';
                    })
                }
            })
        },
    }
}
</script>
<style lang="scss">
.index .commonHeader .headercontain{
    background: #273443;
}
.parameter{
    width: 100%; 
    background: url('../../assets/img/parameterBg.png') no-repeat;
    background-position: -265px 124.01px;
    background-size: 1199.47px 749.99px;
    &-head{
        width: 1195px;
        margin: 0 auto 0;
        display: flex;
        justify-content: space-between;
        .head-left{
            width: 538px;
            height: 552px;
            @include display(center,between);
            margin-top: 72px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .head-right{
            @include display(top,right);
            flex-wrap: wrap;
            width: 521.57px;
            .name{
                // width: 191px;
                padding: 0 20px;
                height: 64px;
                text-align: center;
                line-height: 64px;
                border: 1px solid #E15100;
                color: #E15100;
                font-size: 36px;
                margin-top: 200px;
                @include textWS;
            }
            .introduce{
                width: 100%;
                font-size: 70px;
                line-height: 101px;
                text-align: right;
                margin-top: -142px;
                h1{
                    color: #E15100;
                    font-size: 70px;
                }
                h2{
                    color: #273443;
                    font-size: 70px;
                }
            }
            .pics{
                width: 100%;
                height: 161.52px;
                @include display(center,between);
                margin-top: 105.52px;
                &-item{
                    width:160.52px;
                    height: 160.52px;
                    background-color: #F0F4FA;
                    img{
                        width: auto;
                        height: auto;
                        max-width: 100%;
                    }
                }
            }
        }
    }
    &-detail{
        width: 1200px;
        margin: 0 auto;
        .detail-title{
            font-size: 70px;
            line-height: 101px;
            width: 280px;
            position: relative;
            text-align: center;
            margin: 119.48px auto 82px;
            font-weight: bold;
            color: #273443;
        }
        .detail-title::before{
            position: absolute;
            top: 50.5px;
            left: -456px;
            width: 444px;
            height: 1px;
            background-color: #424D5A;
            display: block;
            content: '';
        }
        .detail-title::after{
            position: absolute;
            top: 50.5px;
            right: -456px;
            width: 444px;
            height: 1px;
            background-color: #424D5A;
            display: block;
            content: '';
        }
        .detail-rule{
            width: 100%;
            margin-bottom: 120px;
            .rule-title{
                line-height: 50px;
                color: #E15100;
                font-size: 50px;
                font-weight: bold;
                line-height: 72px;
                margin-bottom: 49px;
            }
            .rule{
                background-color: #F0F4FA;
            }
            .rule-item{
                width: 100%;
                height: 130px;
                @include display(center,left);
                padding-left: 46px;
                box-sizing: border-box;
                
                span{
                    line-height: 130px;
                    font-size:34px;
                    color: #273443;
                    opacity: 0.4;
                    width: 340px;
                    text-align: left;
                }
                p{
                    font-size:34px;
                    // line-height: 130px;
                    margin-left: 75px;
                    color: #273443;
                }
            }
            .rule:nth-child(2n){
                background-color: #fff;
            }
        }
        .detail-rule:last-child{
            margin-bottom: 206px;
        }
    }   
}
.product-nav{
    width: 1200px;
    margin: 240px auto 122.29px;
    height: 78px;
    @include display(center,right);
    border-bottom: 1px solid rgba(39,52,67,.5);
    .nav-item{
        height: 78px;
        color: rgba(39,52,67,.5);
        font-size: 32px;
        margin-left: 109px;
        cursor: pointer;
    }
    .navActive{
        color: #E15100;
        position: relative;
    }
    .navActive::after{
        position: absolute;
        display: block;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background:#E15100;
        animation: sclaesL .5s linear;
    }
}
</style>